<template>
  <div>
    <div class="header">
      <div class="title">听写电台</div>
      <div class="indexcount">
        当前第{{ indexnow }}个单词 共有{{ testword.length }}个单词
     </div>
    </div>
    <div class="card">
      <div class="msgPho">
        <div class="chMsg">
          没听清？再来一遍
          <i class="iconfont audio" @click="playAudio(this.testnow.pronunciation)">&#xe610;</i>
        </div>

        <div class="phonetic" v-show="nextBtn===true">
          释义：{{ this.testnow.chineseExplain }}
        </div>
      </div>

      <div class="enWrite">
        请输入正确的单词：
        <input type="text" v-model="userWrite" @keyup.enter="upEnter()">
        <div class="flag">
          <i v-if="userflag===true" class="iconfont success">&#xe66d;</i>
          <i v-if="userflag===false" class="iconfont warn">&#xe66c;</i>
        </div>
        <button @click="submit()" v-if="nextBtn===false">确认</button>
        <button @click="next()" v-else>下一题</button>
      </div>

      <div v-if="userflag===false" class="trueWord">
        此单词的正确拼写：{{ this.testnow.wordname }}
      </div>
    </div>
    <coursesFooter btn="test"></coursesFooter>
  </div>
</template>
<script>
import store from '@/store'
import coursesFooter from './courses-footer.vue'

export default {
  name: 'test-dictation',
  components: {
    coursesFooter
  },
  data () {
    return {
      testword: [],
      // 渲染用户此刻背诵单词的信息
      testnow: {
        wordindex: '',
        wordname: '',
        chineseExplain: '',
        phonetic: '',
        pronunciation: ''
      },
      // 记录现在用户背到第几个
      indexnow: 1,
      // 用户输入的单词
      userWrite: '',
      // 判断用户输入的单词对错与否
      userflag: null,
      // 下一个按钮 与 发音 的展示
      nextBtn: false,
      // 存放用户得分情况
      score: [],
      // 存放错误单词
      errorWords: []
    }
  },
  // 在出现新单词时自动播放一遍读音
  watch: {
    testnow (newword, oldword) {
      this.playAudio(newword.pronunciation)
    }
  },
  methods: {
    // 对用户提交的单词进行判断
    submit () {
      // 切换按钮形态
      this.nextBtn = true
      // 播放这个单词的读音
      // this.playAudio(this.testnow.pronunciation)
      if (this.userWrite === this.testnow.wordname) {
        // console.log('输入正确！')
        this.userflag = true
        const i = this.score.findIndex(x => x.wordindex === this.testnow.wordindex)
        this.score[i].point = 1
      } else {
        // console.log('用户输入错误')
        this.userflag = false
        // 将错误单词存入errorword
        this.errorWords.push(this.testnow)
      }
    },
    // 下一题 刷新渲染 若已是最后一题则跳转分数展示页面
    next () {
      this.indexnow++
      // 清空用户输入
      this.userWrite = null
      // 切换按钮形态
      this.nextBtn = false
      // 隐藏判断对错的图标
      this.userflag = null
      if (this.indexnow > this.testword.length) {
        // 已经是最后一题 跳转出去
        // console.log(this.errorWords)
        // console.log(this.score)
        this.$store.commit('courses/setErrorwords', this.errorWords)
        this.$store.commit('courses/setScore', this.score)
        this.$router.push({ path: '/courses/point', query: { name: this.$route.query.name, index: this.$route.query.index, test: 'dictation' } })
      } else {
        this.testnow = this.testword[this.indexnow - 1]
      }
    },
    upEnter () {
      // 会车事件
      // 根据按钮触发
      if (this.nextBtn === true) {
        this.next()
      } else {
        this.submit()
      }
    },
    playAudio (src) {
      const audio = new Audio()
      audio.src = src
      audio.play()
    }
  },
  // 组件生成时 将选择的词赋值然后进行页面渲染
  created () {
    const { testSelection } = store.state.courses
    // console.log(testSelection)
    this.testword = testSelection
    this.testnow = this.testword[0]
    // 初始化得分记录模块
    for (let i = 0; i < this.testword.length; i++) {
      this.score.push({
        wordindex: this.testword[i].wordindex,
        point: 0
      })
    }
  }
}
</script>
<style scoped lang="less">
.header{
  height: 30px;
  line-height: 30px;
  width: 100%;
  .title{
    font-size: 16px;
    font-weight: 600;
    color: #000;
    font-family: '钉钉进步体';
    text-indent: 20px;
    width: 100px;
    float: left;
  }
  .indexcount{
    font-size: 10px;
    font-family: '钉钉进步体';
  }
}

.card{
  padding-top: 20px;
  margin: 0 auto;
  margin-top: 20px;
  width: 600px;
  height:380px;
  background-color: rgb(238, 238, 238);
  box-shadow: 5px 5px ;
  .msgPho{
    height: 70px;
    .chMsg{
      margin-left: 160px ;
      width: 400px;
      font-size: 20px;
      height: 40px;
      line-height: 40px;
      text-align: left;
      //多出显示省略号
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .phonetic{
      margin-left: 160px ;
      width: 400px;
      font-size: 16px;
      height: 30px;
      line-height: 30px;
      text-align: left;
    }
  }

  .audio{
    cursor: pointer;
    &:active{
      color: dodgerblue;
    }
  }
  .enWrite{
    display: flex;
    margin: 0 auto;
    width: 500px;
    font-size: 16px;
    margin-top: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    input{
      height: 40px;
      border: none;
      border-bottom: 1px solid;
      background-color: rgb(238, 238, 238);
    }
    .flag{

      width: 40px;
      height: 40px;
      line-height: 40px;
      .warn{
        color: red;
      }
      .success{
        color: rgb(137, 244, 137);
      }
    }
    button{
      margin-top: 10px;
      width: 100px;
      height: 30px;
    }
  }
  .trueWord{
    display: flex;
    margin: 0 auto;
    width: 500px;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
</style>
